<template>
  <div class="home">
    <!-- 固定在顶部的导航栏  -->
    <SCNavBar/>

    <div class="content">
      <div class="row">
        <div class="col-xs-6" >
          <product-item v-for="(product, index) in products"  v-if="index % 2 === 0" :key="index" :product="product"/>
        </div>
        <div class="col-xs-6" >
          <product-item v-for="(product, index) in products"  v-if="index % 2 === 1" :key="index" :product="product"/>
        </div>
      </div>    
    </div>
    <loading :is-loading="isLoading"/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import SCNavBar from './SCNavBar.vue'
import ProductItem from './ProductItem.vue'
import Loading from './Loading.vue'

export default {
  // 每次通过路由切换到该组件时，都会重建组件，进入created，
  created () {
    if (!this.firstLoaded) {
      // 未使用命名空间的情况下，此处未指定store的模块名称也可正常使用
      this.$store.dispatch('getAllProducts')
    }
  },
  beforeRouteUpdate (to, from, next) {
    this.curType = parseInt(to.params.id)
    next()
  },
  data () {
    return {
      curType: 0
    }
  },
  components: {
    SCNavBar,
    ProductItem,
    Loading
  },
  computed: {
    products: function () {
      if (this.curType === 0) {
        // 未使用命名空间的情况下，此处未指定store的模块名称也可正常使用
        return this.$store.getters.allProducts
      } else {
        // 未使用命名空间的情况下，此处未指定store的模块名称也可正常使用
        return this.$store.getters.getProductByType(this.curType)
      }
    },
    ...mapGetters({
      // 未使用命名空间的情况下，此处未指定store的模块名称也可正常使用
      isLoading: 'isLoading',
      firstLoaded: 'firstLoaded'
    })
  }
}
</script>

<style scoped>
.home {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow-y: auto;

}
@media (min-width: 768px) {
  .home {
    padding: 50px 0 0;
    margin-bottom: 50px;
  }

  .content {
    margin-top: 50px;
    padding: 0 40px;
  }
}
@media (max-width: 767px) {
  .home {
    padding: 80px 0 0;
    margin-bottom: 80px;
  }
  .content {
    margin-top: 80px;
    padding: 0 20px;
  }
}
</style>